<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<script src="js/01.js"></script>-->
    <title></title>
</head>
<body>
<form action="http://www.baidu.com" method="post" onsubmit="return validate();">
    <table>
        <tr>
            <td>账号:</td>
            <td>
                <input type="text" name="code" id="code">
                <span id="codeInfo"></span>
            </td>
        </tr>
        <tr>
            <td>密码：</td>
            <td>
                <input type="password" name="password" id="password"/>
                <span id="passwordInfo"></span>
            </td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td>
                <input type="password" name="confirmPassword" id="confirmPassword"/>
                <span id="confirmPasswordInfo"></span>
            </td>
        </tr>
        <tr>
            <td>电话号码：</td>
            <td>
                <input type="text" name="phoneNumber" id="phoneNumber"/>
                <span id="phoneNumberInfo"></span>
            </td>
        </tr>
        <tr>
            <td>qq：</td>
            <td>
                <input type="text" name="qq" id="qq"/>
                <span id="qqInfo"></span>
            </td>
        </tr>
        <tr>
            <td>email：</td>
            <td>
                <input type="text" name="email" id="email">
                <span id="emailInfo"></span>
            </td>
        </tr>
        <tr>
            <td>地区：</td>
            <td>
                <select name="area" id="area" >
                    <option></option>
                    <option>重庆</option>
                    <option>成都</option>
                    <option>上海</option>
                </select>
                <span id="areaInfo"></span>
            </td>
        </tr>

        <tr>
            <td>协议：</td>
            <td>
                <input type="checkbox" name="agree" id="agree" checked="checked"><span>阅读并接收</span>
                <span id="agreeInfo"></span>
            </td>
        </tr>

        <tr>
            <td>
                <input type="submit" value="注册"/>
            </td>
            <td>
                <input type="reset" value="重置"/>
            </td>
        </tr>
    </table>
</form>
<script>
    function validate() {

        var code = document.getElementById('code').value;

        var password = document.getElementById('password').value;

        var confirmedPassword = document.getElementById('confirmPassword').value;

        var phoneNumber = document.getElementById('phoneNumber').value;

        var qq = document.getElementById('qq').value;

        var email = document.getElementById('email').value;

        var area = document.getElementById('area').value;

        var agree = document.getElementById('agree').checked;

        var flag;

        //判断Code
        flag = checkCode(code);
        if (flag != 0) {
            document.getElementById('codeInfo').innerHTML = "<font color='red'>账号不能为空</font>"
            return false;
        }

        //判断密码
        flag = checkPassword(password);
        if (flag != 0) {
            if(flag == 1){
                document.getElementById('passwordInfo').innerHTML =
                    "<font color='red'>密码不能为空</font>";
            }else {
                document.getElementById('passwordInfo').innerHTML
                    ="<font color='red'>密码应该为6-12字符</font>";
            }
            return false;
        }
        //检查确认密码
        flag = checkConfirmPassword(password, confirmedPassword);
        if (flag != 0) {
            if(flag == 0){
                document.getElementById('confirmPasswordInfo').innerHTML =
                    "<font color='red'>确认密码为空！</font>";
            }else {
                document.getElementById('confirmPasswordInfo').innerHTML =
                    "<font color='red'>两次密码不一致</font>";
            }
            return false;
        }
        //检查电话号码
        flag = checkPhoneNumber(phoneNumber);
        if (flag != 0) {
            document.getElementById('phoneNumberInfo').innerHTML =
                "<font color='red'>手机号码错误!</font>";
            return false;
        }
        //检查qq
        flag = checkQq(qq);
        if (flag != 0) {
            if(flag == 1){
                document.getElementById('qqInfo').innerHTML =
                    "<font color='red'>qq号码为空!</font>";
            }else {
                document.getElementById('qqInfo').innerHTML =
                    "<font color='red'>qq号码错误!</font>";
            }

            return false;
        }

        //检查邮箱
        flag = checkEmail(email);
        if (flag != 0) {
            if(email == null){
                document.getElementById('emailInfo').innerHTML =
                    "<font color='red'>邮箱不能为空！</font>";
            }else {
                document.getElementById('emailInfo').innerHTML =
                    "<font color='red'>邮箱格式错误！</font>";
            }
            return false;
        }
        //检查地区
        flag = checkArea(area);
        if (flag != 0) {
            document.getElementById('areaInfo').innerHTML =
                "<font color='red'>地区不能为空！</font>";
            return false;
        }
        //检查协议
        flag = checkAgree(agree);
        if (flag != 0) {
            document.getElementById('agreeInfo').innerHTML =
                "<font color='red'>请同意协议！</font>";
            return false;
        }
        return flag;
    }

    function checkCode(code) {
        if (code == '') {
            return 1;
        }
        return 0;
    }

    function checkPassword(password) {
        if(password == ''){
            return 1
        }else if(password.length<6 ||password.length>12) {
            return 2;
        }
        return 0;
    }

    function checkConfirmPassword(password, confirmPassword) {
        if(confirmPassword == ''){
            return 1;
        }
        else if(password != confirmPassword){
            return 2;
        }
        return 0;
    }
    function checkPhoneNumber(phoneNumber) {
        if (!(/^1[34578]\d{9}$/.test(phoneNumber))) {
            return 1;
        }
        return 0;
    }
    function checkQq(qq) {
        if(qq == null){
            return 1;
        }else if (!(/^[1-9]\d{6,12}$/.test(qq))) {
            return 2;
        }
        return 0;
    }

    function checkEmail(email) {
        if(email == ''){
            return 1;
        }else if (!(/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(email))) {
            return 2;
        }
        return 0;
    }

    function checkArea(area) {
        if (area == '') {
            return 1;
        }
        return 0;
    }

    function checkAgree(agree) {
        if (agree == false) {
            return 1;
        }
        return 0;
    }

</script>
</body>
</html>